<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幻游网-我的信息</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/userinfo.css">
</head>
<body>
    <div class="container-fluid  p-0">
        <header class="top-area animal-top">
            <div class="top-nav container ">
                <nav class="navbar navbar-expand-lg  navStyle navbar-dark animal-left">
                    <!-- 商标 -->
                    <div class="navbar-brand">
                        <a href="#" class="logo-text">HuanYou</a>
                    </div>
    
                    <!-- 汉堡按钮 -->
                    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#toggle">
                        <span class="navbar-toggler-icon "></span>
                    </button>
                    <!-- 导航列表 -->
                    <div class="navbar-collapse collapse justify-content-end nav-collapse-style" id="toggle">
                        <ul class="navbar-nav">
                            <li class="nav-item nav-list-style userindex">
                                <a href="#" class="nav-link ">主页</a>
                            </li>
                            <li class="nav-item nav-list-style">
                                <a href="#" class="nav-link allgame " id="introducebtn">所有游戏</a>
                            </li>
                            <li class="nav-item nav-list-style">
                                <a href="#" class="nav-link myinfo" data-bs-toggle="modal">我的主页</a>
                            </li>
                            <li class="nav-item nav-list-style">
                                <a href="#" class="nav-link aboutme">关于我们</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <div class="container user-info">
            <div class="user-info-card animal-top">
                <div class="myinfo-card">
                    <h3 class="myinfo-title"><i class="fa fa-id-card" aria-hidden="true"></i> 个人信息</h3>
                    <hr>
                    <div class="myinfo-content row">
                        <div class="myHead col-lg-3 col-12">
                            <div class="myHead-frame" href="#userHeadEdit" data-bs-toggle="modal">
                                <img src="../images/HeadImage/head0.jpg" id="userHeadImage" >
                            </div>
                        </div>
                        <div class="myInfo col-lg-9 col-12">
                            <div class="myNickname">
                                <div>昵称：<span class="text-secondary getUsername"></span></div>
                            </div>
                            <div class="myGender">
                                <div>性别：<span class="text-secondary getGender"></span></div>
                            </div>
                            <div class="myBirthday">
                                <div>出生日期：<span class="text-secondary getBirthday"></span></div>
                            </div>
                            <div class="myID">
                                <div class="text-success">用户ID：<span class="getUserID"></span></div>
                            </div>
                            <div class="editMyinfo">
                                <a href="#edit-userInfo" data-bs-toggle="modal">点击编辑我的个人信息</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myProfile-card animal-top">
                <div class="myProfile-card-head">
                    <h3 class="myinfo-title"><i class="fa fa-user"></i> 我的简介</h3>
                    <hr>
                </div>
                <div class="myProfile-card-content">
                    <p class="getProfile"></p>
                </div>
            </div>
            <div class="myLoved-card animal-top">
                <div class="myProfile-card-head">
                    <h3 class="myinfo-title"><i class="fa fa-heart" aria-hidden="true"></i> 我的喜好</h3>
                    <hr>
                </div>
                <div class="myLoved-card-content">
                    <h3>你喜欢的游戏类型</h3>
                    <div class="container">
                        <form class="loved-type row getOrSetLoved" method="GET" id="lovedEdit">
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type1" class="loved-box">
                                    <input type="checkbox" id="type1" name="loved">
                                    <div class="loved-font"><i class="fa fa-bed" aria-hidden="true"></i></div>
                                    <span>休闲</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type2" class="loved-box">
                                    <input type="checkbox" id="type2" name="loved">
                                    <div class="loved-font"><i class="fa fa-bicycle" aria-hidden="true"></i></div>
                                    <span>体育</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type3" class="loved-box">
                                    <input type="checkbox" id="type3" name="loved">
                                    <div class="loved-font"><i class="fa fa-grav" aria-hidden="true"></i></div>
                                    <span>冒险</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type4" class="loved-box">
                                    <input type="checkbox" id="type4" name="loved">
                                    <div class="loved-font"><i class="fa fa-hand-rock-o" aria-hidden="true"></i></div>
                                    <span>动作</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type5" class="loved-box">
                                    <input type="checkbox" id="type5" name="loved">
                                    <div class="loved-font"><i class="fa fa-car" aria-hidden="true"></i></div>
                                    <span>竞速</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type6" class="loved-box">
                                    <input type="checkbox" id="type6" name="loved">
                                    <div class="loved-font"><i class="fa fa-gamepad" aria-hidden="true"></i></div>
                                    <span>角色扮演</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type7" class="loved-box">
                                    <input type="checkbox" id="type7" name="loved">
                                    <div class="loved-font"><i class="fa fa-hourglass-half" aria-hidden="true"></i></div>
                                    <span>策略</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="love-type-card col-lg-3 col-6">
                                <label for="type8" class="loved-box">
                                    <input type="checkbox" id="type8" name="loved">
                                    <div class="loved-font"><i class="fa fa-globe" aria-hidden="true"></i> </div>
                                    <span>网游</span>
                                    <div class="loved-checked"></div>
                                </label>
                            </div>
                            <div class="col-12 loved-submit">
                                <input type="button" value="点击编辑" id="loved-btn">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer container-fluid">
        <div class="container footer-content">
            <span>版权所有@226幻游网责任有限公司</span>
        </div>
    </footer>
    <!-- 编辑个人信息模态框 -->
    <div class="modal fade" id="edit-userInfo" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form action="" method="POST" id="userInfoEditForm">
                    <div class="modal-header bg-primary text-light ">
                        <h5>编辑你的个人信息</h5>
                        <button  class="btn-close btn-close-white"  data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="my-3">
                            <label for="editNickname" class="form-label">昵称：</label>
                            <input type="text" name="nickname" class="form-control" id="editNickname">
                        </div>
                        <div class="my-3">
                            <span>性别：</span>
                            
                            <input type="radio" name="gender" value="男" class="" id="sex1">
                            <label for="sex1">男</label>
                            
                            <input type="radio" name="gender" value="女" class="" id="sex2">
                            <label for="sex2">女</label>

                            
                            <input type="radio" name="gender" value="保密" class="" id="sex3">
                            <label for="sex3">保密</label>
                        </div>
                        <div class="my-3">
                            <label for="editBirthday" class="form-label">你的出身日期：</label>
                            <input type="date" class="form-control" id="editBirthday" name="birthday">
                        </div>
                        <div class="my-3">
                            <label for="editProfile">我的简介：</label>
                            <textarea name="profile" id="editProfile" class="form-control" placeholder="输入你的个人简介" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button  class="btn btn-primary" type="submit">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="userHeadEdit" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="" method="POST" id="userHeadEditForm">
                    <div class="modal-header bg-primary text-light ">
                        <h5>编辑你的头像</h5>
                        <button  class="btn-close btn-close-white"  data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body img-select">
                        <div class="img-frame">
                            <label for="head0">
                                <input type="radio" id="head0" name="head" value="head0.jpg" class="headInput">
                                <img src="../images/HeadImage/head0.jpg">
                            </label>
                        </div>
                        <div class="img-frame">
                            <label for="head1">
                                <input type="radio" id="head1" name="head" value="head1.jpg" class="headInput">
                                <img src="../images/HeadImage/head1.jpg" >
                            </label>
                        </div>
                        <div class="img-frame">
                            <label for="head2">
                                <input type="radio" id="head2" name="head" value="head2.jpg" class="headInput">
                                <img src="../images/HeadImage/head2.jpg" >
                            </label>
                        </div>
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button  class="btn btn-primary" type="submit">确定编辑</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/scrollreveal.min.js"></script>
    <script src="../js/animate.js"></script>
    <script src="../js/page.js"></script>
    <script src="../js/user.js"></script>
</body>
</html>